<extend name="Public/base"/>

<block name="body">
  <div class="main-title">
    <h2>订单统计</h2>
  </div>

  <!-- 按钮工具栏 -->
  <div class="cf">
    <div class="fl">
      <a class="btn" href="{:U()}">刷 新</a>（点击"刷新"按钮清除搜索条件，显示全部信息。）
    </div>

    <!-- 高级搜索 -->
    <form action="{:U()}" method="GET" id="J_search_form">
    <div class="search-form fr cf">
      <div class="sleft">
        <input type="text" name="start_time" class="search-input w-100 date_select" value="{$start_time}" placeholder="起始时间"/>
        <span class="fl line-h">至</span>
        <input type="text" name="end_time" class="search-input w-100 date_select" value="{$end_time}" placeholder="今天"/>
        <a class="sch-btn" href="javascript:;" id="J_search"><i class="btn-search"></i></a>
      </div>
    </div>
    </form>
  </div>
  <!-- 数据表格 -->
  <div class="data-table table-striped">
    <table>
      <thead>
        <tr>
          <th>平台名称</th>
          <th>待支付（笔）</th>
          <th>已支付（笔）</th>
          <th>退款（笔）</th>
          <th>交易完成（笔）</th>
          <th>总订单（笔）</th>
          <th>总成交金额（元）</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{$stat.shopname}</td>
          <td>{$stat.stat_num.order_unpay_count|default='-'}</td>
          <td>{$stat.stat_num.order_ispay_count|default='-'}</td>
          <td>{$stat.stat_num.order_refund_count|default='-'}</td>
          <td>{$stat.stat_num.order_success_count|default='-'}</td>
          <td>{$stat.stat_num.order_count|default='-'}</td>
          <td>{$stat.stat_num.finish_amount|default='-'}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="chart-body">
    <div id="chart_box"></div>
    <div class="cache-by">
      数据缓存于：
      {$stat.cacheTime|format_date}
      <empty name="stat.is_new">
        &nbsp; <a href="javascript:clearCache();">更新</a>
      </empty>
    </div>
  </div>
</block>

<block name="script"> 
  <script language="javascript" type="text/javascript" src="__JS__/echarts/echarts-all.js"></script>
  <script language="javascript" type="text/javascript" src="__JS__/My97Date/WdatePicker.js"></script>
  <script type="text/javascript">
    function clearCache(){
      url = window.location.href;
      $.get(url, {'reload':1}, function(){
        window.location.reload();
      });
    }

    $(function() {
      //搜索
      $("#search").click(function() {
        var url = $(this).attr('url');
        var query = $('.search-form').find("select,input").serialize();
        query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g, '');
        query = query.replace(/^&/g, '');
        url += query ? ((url.indexOf('?') > - 1 ? '&' : '?') + query) : '';
        window.location.href = url;
      });

      //回车自动提交
      $('.search-form').find('input').keyup(function(event) {
        if(event.keyCode === 13) {
          $("#search").click();
        }
      });
      //导航高亮
      highlight_subnav("{:U('index')}");
      $('.date_select').focus(function() {
        WdatePicker({skin: 'twoer', dateFmt: 'yyyy-MM-dd', maxDate: '%y-%M-%d'});
      });
      //结束日期智能化判断
      if($('input[name="end_time"]').val() === "{$today}"){
        $('input[name="end_time"]').val("");
      }
    }); 
    </script> 
    <script type="text/javascript">
      $('#chart_box').css({height:'400px', marginTop:'50px'});
      $('#search-form').css({marginTop:'400px'});
      var myChart = echarts.init(document.getElementById('chart_box'));
        option = {
          title : {
            text : '订单趋势图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: {$stat.chartData.legend}
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {show: false, readOnly: false},
              type : ['tiled'],
            },
            x : '130',
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: {$stat.chartData.xAxis}
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: {$stat.chartData.data}
        };
        myChart.setOption(option);
  </script>
</block>